<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true" :autoBack="true">
			<view slot="left" class="navbar-left">
				<navigator open-type="navigateBack" :delta="1" class="back-navigator">
					<view class="back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="navbar-title">账号密码设置</text>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<!-- 主内容区 -->
		<view class="content-container">
			<view class="employee-card">
				<!-- 账号信息 -->
				<view class="info-section">
					<view class="info-item-single">
						<text class="info-label">账号:</text>
						<text class="info-value">{{ userInfo.account || '未设置' }}</text>
					</view>
				</view>

				<!-- 密码修改区 -->
				<view class="info-section">
					<text class="section-title">修改密码</text>
					<view class="default-pwd-tip">
						<text>提示：默认初始密码为'123456'，请先输入初始密码修改</text>
					</view>

					<!-- 旧密码（带显隐） -->
					<view class="info-item-single">
						<text class="info-label">旧密码:</text>
						<view class="pwd-input-wrap">
							<u-input v-model="oldPassword" :type="showOldPwd?'text':'password'"
								placeholder="请输入旧密码（默认初始密码123456）" class="info-input"></u-input>
							<u-icon :name="showOldPwd ? 'eye-fill' : 'eye-off'" color="#999" size="20" class="pwd-icon"
								@click="showOldPwd = !showOldPwd"></u-icon>
						</view>
					</view>

					<!-- 新密码（带显隐） -->
					<view class="info-item-single">
						<text class="info-label">新密码:</text>
						<view class="pwd-input-wrap">
							<u-input v-model="newPassword" :type="showNewPwd?'text':'password'"
								placeholder="请输入新密码（6-20位）" class="info-input"></u-input>
							<u-icon :name="showNewPwd ? 'eye-fill' : 'eye-off'" color="#999" size="20" class="pwd-icon"
								@click="showNewPwd = !showNewPwd"></u-icon>
						</view>
						<!-- 新密码长度提示 -->
						<text v-if="newPassword && (newPassword.length <6 || newPassword.length>20)" class="error-tip">
							新密码长度需6-20位
						</text>
					</view>

					<!-- 确认密码（带显隐） -->
					<view class="info-item-single">
						<text class="info-label">确认密码:</text>
						<view class="pwd-input-wrap">
							<u-input v-model="confirmPassword" :type="showConfirmPwd?'text':'password'"
								placeholder="请再次输入新密码" class="info-input"></u-input>
							<u-icon :name="showConfirmPwd ? 'eye-fill' : 'eye-off'" color="#999" size="20"
								class="pwd-icon" @click="showConfirmPwd = !showConfirmPwd"></u-icon>
						</view>
						<!-- 密码不一致提示 -->
						<text v-if="confirmPassword && newPassword !== confirmPassword" class="error-tip">
							两次输入的密码不一致
						</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 保存按钮移至页面底部 -->
		<view class="bottom-submit-btn">
			<view class="submit-btn" @click="updatePassword" :class="{disabled: submitDisabled}">
				<text>保存修改</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfoApi,
		updatePasswordApi
	} from "@/api/auth.js";

	export default {
		data() {
			return {
				userInfo: {}, // 保存完整用户信息
				oldPassword: '',
				newPassword: '',
				confirmPassword: '',
				// 密码显隐控制
				showOldPwd: false,
				showNewPwd: false,
				showConfirmPwd: false
			};
		},
		computed: {
			// 提交按钮禁用状态（表单验证不通过时禁用）
			submitDisabled() {
				if (!this.oldPassword || !this.newPassword || !this.confirmPassword) return true;
				if (this.newPassword.length < 6 || this.newPassword.length > 20) return true;
				if (this.newPassword !== this.confirmPassword) return true;
				return false;
			}
		},
		onLoad() {
			this.loadUserInfo();
		},
		methods: {
			// 加载用户账号信息
			async loadUserInfo() {
				try {
					const res = await getUserInfoApi();
					if (res.code === 200) {
						this.userInfo = res.data;
					}
				} catch (error) {
					console.error('加载账号信息失败:', error);
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'error'
					});
				}
			},

			// 修改密码
			async updatePassword() {
				// 前置验证（防止禁用状态下点击）
				if (this.submitDisabled) return;

				// 加载中提示
				uni.showLoading({
					title: '处理中...',
					mask: true
				});

				try {
					const res = await updatePasswordApi({
						sysUserId: this.userInfo.sysUserId,
						oldPassword: this.oldPassword,
						newPassword: this.newPassword
					});

					uni.hideLoading();

					if (res.code === 200) {
						uni.showToast({
							title: '密码修改成功！',
							icon: 'success',
							duration: 2000
						});
						// 清空输入框
						this.oldPassword = '';
						this.newPassword = '';
						this.confirmPassword = '';
						// 提示重新登录
						setTimeout(() => {
							uni.showModal({
								title: '温馨提示',
								content: '密码已修改成功，请重新登录账号',
								showCancel: false,
								success: () => {
									uni.removeStorageSync('token');
									uni.reLaunch({
										url: '/pages/login/login'
									});
								}
							});
						}, 1500);
					} else {
						// 后端返回非200的业务错误
						uni.showToast({
							title: res.msg || '修改失败',
							icon: 'none',
							duration: 2000
						});
					}
				} catch (error) {
					uni.hideLoading();
					console.error('修改密码失败:', error);
					// 精准捕获后端返回的错误信息
					const errorMsg = error.response?.data?.msg ||
						error.msg ||
						'旧密码错误或系统异常，请检查密码后重试';
					uni.showToast({
						title: errorMsg,
						icon: 'none',
						duration: 3000 // 错误提示显示久一点
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
		padding-bottom: 80rpx; // 给底部按钮留空间
		box-sizing: border-box;
	}

	.navbar-left {
		display: flex;
		align-items: center;
	}

	.back-navigator {
		display: flex;
		align-items: center;
	}

	.back-content {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 16rpx;
	}

	.content-container {
		margin: 0 auto;
		padding: 16px;
	}

	.employee-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	.info-section {
		background-color: #f9fafb;
		padding: 16px;
		border-radius: 8px;
		margin-bottom: 16px;
	}

	.default-pwd-tip {
		color: #ff9800;
		font-size: 12px;
		margin-bottom: 12px;
		padding-left: 88px;
		line-height: 1.4;
	}

	.info-item-single {
		display: flex;
		align-items: flex-start;
		margin-bottom: 12px;
		font-size: 14px;
		padding: 10rpx 0;
		border-bottom: 1px solid #f0f0f0;
		position: relative;

		&:last-child {
			margin-bottom: 0;
			border-bottom: none;
		}
	}

	// 密码输入框容器（带显隐图标）
	.pwd-input-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		position: relative;
	}

	.pwd-icon {
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.error-tip {
		position: absolute;
		left: 88px;
		bottom: 0;
		color: #f56c6c;
		font-size: 12px;
		line-height: 1.2;
	}

	.info-label {
		color: #6b7280;
		margin-right: 8px;
		width: 80px;
		flex-shrink: 0;
		font-size: 14px;
		line-height: 40rpx;
	}

	.info-value {
		color: #1f2937;
		flex: 1;
		word-wrap: break-word;
		word-break: break-all;
		font-size: 14px;
		line-height: 40rpx;
	}

	.info-input {
		flex: 1;
		height: 40rpx;
		font-size: 14px;
		padding-right: 40rpx !important; // 给显隐图标留空间
	}

	.section-title {
		display: block;
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 12px;
		color: #1f2937;
	}

	// 底部按钮容器
	.bottom-submit-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 40rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		z-index: 99;
	}

	.submit-btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #1e88e5;
		color: #fff;
		border-radius: 28rpx;
		font-size: 30rpx;
		transition: background-color 0.2s;

		// 禁用状态样式
		&.disabled {
			background-color: #ccc;
			color: #fff;
			pointer-events: none;
		}
	}
</style>